<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <div class="bg-purple">
          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">{{title}}详情</span>
            </div>
            <el-form :model="listDate" @submit.native.prevent>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目名称：" class="form-item">
                    <span>{{listDate.projectName}}</span>
                  </el-form-item>
                  <el-form-item label="工程规模：" class="form-item">
                    <span>{{listDate.scale}}</span>
                  </el-form-item>
                  <el-form-item label="招标方式：" class="form-item">
                    <span>{{listDate.biddingType}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="机构名称：" class="form-item">
                    <span>{{listDate.orgName}}</span>
                  </el-form-item>
                  <el-form-item label="是否需要招标：" class="form-item">
                    <span>{{{'0':'不需要招标','1':'需要招标'}[listDate.needBidding]}}</span>
                  </el-form-item>
                  <el-form-item label="招标提交时间：" class="form-item">
                    <span>{{listDate.biddingTime}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-purple-light">
          <el-card class="box-card">
            <div class="head-container">
              <el-row>
                <el-col :span="10">
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  />
                </el-col>
                <el-col :span="14">
                  <div class="to-right">
                    <i class="el-icon-tickets"></i>
                    <span class="title">相关资料文件.doc</span>
                    <div class="text-btn">
                      <el-button type="text" size="mini" class="btns">预览</el-button>
                      <el-button type="text" size="mini" class="btns">下载</el-button>
                      <el-button type="text" size="mini" class="btns">修改</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "productDetail",
    data(){
      return{
        deptOptions: [
          {
            id: 100,
            label: "测试一",
            children: [
              {
                id: 102,
                label: "测试1-1"
              },
              {
                id: 103,
                label: "测试1-2"
              }
            ]
          }
        ],
        listDate: {
          projectName: '测试工程项目名称',
          orgName: '测试机构名称',
          scale: 20,
          investment: 10000,
          needBidding: 0,
          status: '00',
          estabTime: '2022-06-29 12:33:33'
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        title: ''
      }
    },
    created(){},
    methods:{
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(val) {
        console.log(val)
        // this.$set(this.editForm, "orgID", val.orgID);
        // this.$set(this.editForm, "orgName", val.orgName);
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/style.scss';
</style>
